import {GisPlot, PlotTypes} from '../src';
import {ICON_DIC, PATH_DIC} from './src/constants';
import IPlot from './src/interface/IPlot';
import Offline from './src/plot/offline';
import Online from './src/plot/online';
import './css/index.scss';
import {createMap} from './src/util/map';

let model: string = 'offline';
// model = 'online';
const point: Array<number> = [120.01245975494385, 30.285433530807495];
const mapDom: HTMLElement = document.getElementById('map') as HTMLElement;
for (let i = mapDom.childNodes.length - 1; i >= 0; i--) {
    mapDom.removeChild(mapDom.childNodes[i]);
}

let code: string = 'EPSG:3857';
// code = 'EPSG:4326';

let type: string = 'xyz';
type = 'wmts';

const {map, plotLayer} = createMap({
    code,
    type,
    dom: mapDom,
    center: point
});

let plot: IPlot;
let currentSelectedFeature: any = null;

const gisPlot: GisPlot = new GisPlot(map, {isClear: true});
// const gisPlot: GisPlot = new GisPlot(map, {zoomToExtent: true});


map.on('singleclick', (event: any): void => {
    const feature: any = map.forEachFeatureAtPixel(event.pixel, (feature: any): any => feature, {});
    console.log('singleclick', feature);
    if (feature && feature.get('isPlot') && !gisPlot.plotDraw.isDrawing()) {
        gisPlot.plotEdit.activate(feature);
    } else {
        gisPlot.plotEdit.deactivate();
    }
});

map.on('dblclick', (event: any): void => {
    const feature: any = map.forEachFeatureAtPixel(event.pixel, (feature: any): any => feature, {});
    if (feature && feature.get('isPlot') && !gisPlot.plotDraw.isDrawing()) {
        currentSelectedFeature = feature;
        gisPlot.plotEdit.activateEdit(feature);
    } else {
        gisPlot.plotEdit.deactivate();
        currentSelectedFeature = null;
    }
});

if (model === 'offline') {
    plot = new Offline(gisPlot, plotLayer, map);
} else {
    const loginInfo: { host: string, username: string, password: string } = {
        host: 'http://192.168.130.204:9998',
        username: 'jgj',
        password: 'scooper1'
    };
    plot = new Online(gisPlot, plotLayer, map, loginInfo);
}

const onDeletePlot = (): any => {
    console.log(currentSelectedFeature);
    gisPlot.plotEdit.deactivate();
    plotLayer.getSource().removeFeature(currentSelectedFeature);
    currentSelectedFeature = null;
};

const ulDom: HTMLElement = document.getElementById('left-button-wrapper') as HTMLElement;

const clickHandler = (evt: MouseEvent) => {
    const plotType: PlotTypes = (evt.target as HTMLElement).getAttribute('data-id') as PlotTypes;
    const key: string = (evt.target as HTMLElement).getAttribute('data-type') as string;
    const id: string = (evt.target as HTMLElement).getAttribute('id') as string;
    if (id === 'deletePlot') {
        onDeletePlot();
        return;
    }
    if (typeof (ICON_DIC as any)[key] !== 'undefined') {
        const params: { url: any, size: Array<number> } = {url: null, size: [10, 10]};
        params.url = (ICON_DIC as any)[key].url;
        params.size = (ICON_DIC as any)[key].size;
        plot.activate(plotType, params);
    } else {
        plot.activate((evt.target as HTMLElement).id as PlotTypes, (PATH_DIC as any)[(evt.target as HTMLElement).id]);
    }
};

ulDom.addEventListener('click', clickHandler, false);
